<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增数据</title>
  <script>
    function  showUserTip1() {
      document.getElementById('userTip1').innerHTML = '<b style="color: lightgray;">排课ID不能为空</b>';
    }

    function  showUserTip2() {
      document.getElementById('userTip2').innerHTML = '<b style="color: lightgray;">课序号不能为空</b>';
    }

    function  showUserTip3() {
      document.getElementById('userTip3').innerHTML = '<b style="color: lightgray;">选课人数上限不能为空</b>';
    }

    function  showUserTip4() {
      document.getElementById('userTip4').innerHTML = '<b style="color: lightgray;">开课学期不能为空</b>';
    }

    function  checkUser1() {
      var name = document.getElementById('1').value;
      if (name === ''){
        document.getElementById('userTip1').innerHTML = '<b style="color: red">排课ID不能为空</b>'
        return 0;
      }else{
        document.getElementById('userTip1').innerHTML = '<b style="color:  green"> ok </b>'
        return 1;
      }
    }

    function  checkUser2() {
      var name = document.getElementById('2').value;
      if (name === ''){
        document.getElementById('userTip2').innerHTML = '<b style="color: red">课序号不能为空</b>'
        return 0;
      }else{
        document.getElementById('userTip2').innerHTML = '<b style="color:  green"> ok </b>'
        return 1;
      }
    }

    function  checkUser3() {
      var name = document.getElementById('3').value;
      if (name === ''){
        document.getElementById('userTip3').innerHTML = '<b style="color: red">选课人数不能为空</b>'
        return 0;
      }else{
        document.getElementById('userTip3').innerHTML = '<b style="color:  green"> ok </b>'
        return 1;
      }
    }

        function  checkUser3() {
      var name = document.getElementById('3').value;
      if (name === ''){
        document.getElementById('userTip3').innerHTML = '<b style="color: red">开课学期不能为空</b>'
        return 0;
      }else{
        document.getElementById('userTip3').innerHTML = '<b style="color:  green"> ok </b>'
        return 1;
      }
    }
  </script>
</head>
<body>
<h3>请输入要插入记录的相关信息</h3>
<form id="form1" name="form1" method="post" action="/addwx5">
<!--  <label> 标签为 input 元素定义标注（标记）。-->
<!--label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。-->
<!--<label> 标签的 for 属性应当与相关元素的 id 属性相同。-->
  <label>排课ID：
  <input type="text" name="stu_id" id="1" placeholder="输入排课ID" onfocus="showUserTip1()" onblur="checkUser1()"/>
          <span id="userTip1"></span>
  </label>
  <p>
    <label>课程编号：
     <select type="text" name="stu_name">
    {% for pro in dataas -%}
      <option value='{{pro[0]}}'>{{pro[0]}}</option>
    {%endfor-%}
    </select>
    </label>
  </p>
  <p>
    <label>课序号：
    <input type="text" name="stu_sex" id="2" placeholder="输入课序号" onfocus="showUserTip2()" onblur="checkUser2()"/>
      <span id="userTip2"></span>
    </label>
  </p>
  <p>
  <label>教师编号：
     <select type="text" name="stu_age">
    {% for pro in datas -%}
      <option value='{{pro[0]}}'>{{pro[0]}}</option>
    {%endfor-%}
    </select>
  </label>
  </p>
  <p>
    <label>选课人数上限：
    <input type="text" name="stu_profession" id="3" placeholder="输入选课人数上限" onfocus="showUserTip3()" onblur="checkUser3()"/>
      <span id="userTip3"></span>
    </label>
  </p>
    <p>
    <label>开课学期：
    <input type="text" name="stu_aage" id="4" placeholder="输入开课学期" onfocus="showUserTip4()" onblur="checkUser4()"/>
      <span id="userTip4"></span>
    </label>
  </p>
  <p>
    <label>
    <input type="submit" name="button"  value="提交" />
    </label>
    <label>
    <input type="reset" name="button2"  value="重置" />
    </label>
    <br />
  </p>
</form>
<p>&nbsp; </p>
</body>
</html>